<template>
    <div class="center-main-box">
        <component :is="currentComponent" />
    </div>
</template>

<script setup>
import { computed } from 'vue';
import About from '../about/About.vue';
import EarlyNote from '../earlyNote/EarlyNote.vue';
import Home from '../home/Home.vue';
import My from '../my/My.vue';
import Setup from '../setup/Setup.vue';
import TodayNote from '../todayNote/TodayNote.vue';

const props = defineProps(['currentPath']);

const currentComponent = computed(() => {
    switch (props.currentPath) {
        case '/home':
            return Home;
        case '/my':
            return My;
        case '/todayNote':
            return TodayNote;
        case '/earlyNote':
            return EarlyNote;
        case '/setup':
            return Setup;
        case '/about':
            return About;
        default:
            return Home;
    }
});
</script>